<template>
  <view class="listBody">
    <view v-for="(item, index) in list" :key="index" class="forBox" :style="_isLoading ? 'display:none;' : ''" @click="toDetails(item)">
      <TImage
        :src="item.iconUrl"
        width="100%"
        height="200rpx"
        mode="aspectFill"
        border-radius="20rpx"
        @load="imgLoad"
        @error="imgError"
      />
      <view class="locationBox py-19 px-15">
        <view class="title fz-18 fw-7 ov-1">{{ item.name }}</view>
        <view class="describe fz-12 pt-5 ov-2">{{ item.desc }}</view>
      </view>
    </view>

    <template v-if="_isLoading">
      <view v-for="(v, i) in (list.length ? list : 8)" :key="i" class="forBox _skeleton" style="height: 200rpx;"></view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import type { HomeTabResult } from '@/api/dynamicAllocation/types';
  import { parseConfigRouter } from '@/utils/dynamicConfig';
  import { type PropType, ref, computed } from 'vue';

  const props = defineProps({
    list: {
      type: Array as PropType<HomeTabResult[]>,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });

  function toDetails(item: HomeTabResult) {
    parseConfigRouter(item.typeOptionsId, {
      id: item.optionsId,
      title: item.optionsName,
      categoryList: item.informationCategoryList,
      linkUrl: item.linkUrl,
      officialAccountsLink: item.officialAccountsLink,
      appId: item.appId,
      pageTitle: item.name
    });
  };

  const _loadNum = ref(0);
  const imgLoad = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const imgError = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const _isLoading = computed(():boolean =>{
    if(props.loading){
      // 加载中
      return true
    }else if(!props.loading && props.list.length && !_loadNum.value){
      // 加载完成，有数据，但是还在渲染
      return true
    }else{
      return false
    }
  });
</script>

<style lang="scss" scoped>
  .listBody {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 15rpx));
    column-gap: 30rpx;

    .forBox {
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;

      .locationBox {
        position: absolute;
        box-sizing: border-box;
        border-radius: 20rpx;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: rgba(51, 51, 51, 0.5);
        .title {
          color: #ffffff;
        }

        .describe {
          color: #d2d2d2;
        }
      }
    }
  }

  .moreBox {
    color: #808080;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
